import React from 'react'
import { Table, Form, Input, Button } from 'antd'
import BaseTable from '@comp/Table/index'


export default class DialogTable extends BaseTable {
    constructor(props: any) {
        super(props)
        this.state = {
            columns: [],
            selectedKey:[],
            pageConfig: {
                showSizeChanger: true,
                defaultCurrent: 1,
                defaultPageSize: 5,
                total: this.props.total,
                showTotal: total => `共 ${total} 条`,
                pageSizeOptions: ["5", "10", "20", "50"],
                onChange: (page: number, pageSize?: number) => {
                    this.props.pageChange && this.props.pageChange(page, pageSize)
                }
            }
        }
    }
    public componentDidMount() {
        this.setState({ columns: this.props.columns })
    }
    public componentDidUpdate(preProps: any) {
        if (this.props.total !== preProps.total) {
            this.setState({ pageConfig: Object.assign(this.state.pageConfig, { total: this.props.total })})
        }
        if (this.props.dataSource !== preProps.dataSource) {
            this.setState({selectedKey:[]})
        }
    }
    public noFinish = (values: any) => {
        this.props.search && this.props.search(values.name)
    }
    public listSearchForm = () => {
        const {label,placeholder} = this.props
        return (
            <Form style={{ marginBottom: "10px" }} layout="inline" onFinish={this.noFinish}>
                <Form.Item label={label ? label : "食品名称"} name="name">
                    <Input placeholder={placeholder ? placeholder : "请输入食品名称"} allowClear={true} />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit">查询</Button>
                </Form.Item>
            </Form>
        )
    }
    public renderTable() {
        const { dataSource, scroll,search } = this.props
        const { columns, pageConfig } = this.state
        const rowSelection: any = {
            type: "radio",
            onSelect: (record: any) => {
                this.props.selectRow && this.props.selectRow(record)
            },
            selectedRowKeys: this.state.selectedKey,
            onChange:(selectedRowKeys:any[])=> {
                this.setState({selectedKey:selectedRowKeys})
            }
        }
        return (
            <div className="source_table">
                {search ? this.listSearchForm() : null}
                <Table
                    rowKey="Id"
                    bordered={true}
                    columns={columns}
                    dataSource={dataSource}
                    pagination={pageConfig}
                    scroll={scroll}
                    rowSelection={rowSelection}>
                </Table>
            </div>
        )
    }
}